<template>
    <div class="articleListBox" ref="meArticle">
        <div class="clearFix operationBox">
            <!-- tab -->
            <div class="btns">
                <!-- <span :class="{'btnsActive':isList==null}" @click="articTab('write')"
                    v-if="articleTab=='meArticle'">{{isArticleEdit?'编辑文章':'写文章'}}</span>
                <el-divider direction="vertical" v-if="articleTab=='meArticle'"></el-divider> -->
                <span :class="{'btnsActive':isList==false}" @click="articTab('abstract')">摘要</span>
                <el-divider direction="vertical"></el-divider>
                <span :class="{'btnsActive':isList==true}" @click="articTab('list')">列表</span>
            </div>
            <!-- 批量管理 -->
            <div class="term">
                <!-- <el-button v-if="articleTab=='meArticle' || articleTab=='collection'" type="text" class="batch"
                    @click="isAdministration = !isAdministration">批量管理</el-button> -->
                <!-- <el-dropdown trigger="click">
                    <el-button type="text">排序</el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>发表时间</el-dropdown-item>
                        <el-dropdown-item>最新修改</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown> -->
            </div>
        </div>
        <!-- 批量管理展开操作 -->
        <div class="operation" v-if="isAdministration">
            <el-checkbox :indeterminate="check.length>0&&!isIndeterminate?true:false" v-model="checkAll"
                @change="handleCheckAllChange">全选
            </el-checkbox>
            <el-button type="text" style="margin-left: 10px;" @click="dialogTableVisible=true"
                v-if="articleTab!='collection'">权限设置</el-button>
            <el-button type="text" style="margin: 0 15px;" @click="updateType()" v-if="articleTab!='collection'">修改分类
            </el-button>
            <el-button type="text" @click="articleDelete()" v-if="articleTab!='collection'">删除文章</el-button>
            &nbsp;&nbsp;<el-button type="text" @click="collectRemove()" v-if="articleTab=='collection'">移除收藏</el-button>
        </div>
        <!-- 文章列表 -->
        <div>
            <ul class="listWrap" ref="articleList">
                <!-- 写文章 -->
                <li v-if="isList ==null">
                    <el-form ref="form" label-width="60px">
                        <el-form-item label="标题">
                            <el-input placeholder="请输入标题" v-model="articleTitle"></el-input>
                        </el-form-item>
                        <el-form-item label="内容">
                            <!-- <Wangeditor ref="editorElem" :catchData="articleData" @catchData="catchData"></Wangeditor> -->
                            <TinymceEditor v-model="content" ref="tinymceeditor"></TinymceEditor>
                        </el-form-item>
                    </el-form>
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <el-form ref="form" label-width="60px">
                                <el-form-item label="分类:">
                                    <el-select v-model="articleClassification" placeholder="请选择">
                                        <el-option v-for="item in articleClassificationList" :key="item.id"
                                            :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="5">
                            <el-form ref="form" label-width="60px">
                                <el-form-item label="权限:">
                                    <el-select v-model="permission" placeholder="请选择">
                                        <el-option v-for="item in permissionArr" :key="item.id" :label="item.name"
                                            :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="4" :offset="9">
                            <el-button type="text">预览</el-button>
                            <el-button type="text" @click="addArticle(0)">保存草稿</el-button>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="3" :offset="2">
                            <el-form ref="form" :inline="true" label-width="60px">
                                <el-form-item label>
                                    <el-checkbox v-model="isNoReprint">禁止转载</el-checkbox>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="2">
                            <el-form ref="form" :inline="true" label-width="60px">
                                <el-form-item label>
                                    <el-checkbox v-model="isToping">置顶</el-checkbox>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="3" :offset="13">
                            <el-button type="text" @click="articTab('list')">取消</el-button>
                            <el-button type="text" @click="addArticle(1)">发布</el-button>
                        </el-col>
                    </el-row>
                </li>
                <!-- 文章列表 -->
                <li class="list" v-else v-for="(item, index) in articleOrDraftList" :key="index">
                    <div class="listTitleWarp clearFix">
                        <div class="listTitle">
                            <el-checkbox-group v-model="check" v-if="isAdministration" @change="handleCheckChange">
                                <el-checkbox :label="item"><span @click="goReading(item)">{{item.title}}</span>
                                </el-checkbox>
                            </el-checkbox-group>
                            <span v-if="!isAdministration" @click="goReading(item)">{{item.title}}</span>
                        </div>
                        <div class="btn">
                            <span class="time">{{item.creationtime}}</span>
                            <!-- <el-button type="text" @click="collectRemove(item)" >移除收藏</el-button> -->
                            <!-- <el-button type="text"  @click="collect(item)"
                            :disabled="item.collect">收藏</el-button> -->
                            <el-dropdown trigger="click" v-if="articleTab=='meArticle'">
                                <!-- <el-button type="text">操作</el-button> -->
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <el-button type="text" @click="articleEdit(item)" style="width:100%">
                                            &emsp;&emsp;编辑&emsp;&emsp;</el-button>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <el-button type="text" @click="articleDelete(item)">删除文章</el-button>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <el-button type="text" @click="updatePermission(item)">设置权限</el-button>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <el-button type="text" @click="updateType(item)">修改分类</el-button>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                    <div class="substance" v-if="!isList">
                        <p @click="goReading(item)" v-html="item.content"></p>
                        <p>
                            <el-button type="text">阅读（{{item.readnum}}）</el-button>
                            <el-button type="text">评论（{{item.commentnum}}）</el-button>
                            <el-button type="text" @click="collectRemove(item)" v-if="articleTab =='collection'">移除收藏</el-button>
                            <el-button type="text" @click="collect(item)"
                            :disabled="item.collect">收藏</el-button>
                        </p>
                    </div>
                </li>
                <li v-if="articleOrDraftList.length==0 && isList !==null">
                    <span>暂没有文章数据.....</span>
                </li>
            </ul>
        </div>
        <!-- 权限设置 -->
        <el-dialog title="权限设置" width="650px" :visible.sync="dialogTableVisible">
            <el-radio-group v-model="upPermission">
                <el-radio :label="item.id" v-for="(item, index) in permissionArr" :key="index">{{item.name}}</el-radio>
            </el-radio-group>
            <div class="Popubtn">
                <el-button type="primary" @click="updatePermissionDo()" plain>确定</el-button>
                <el-button plain @click="dialogTableVisible=false">取消</el-button>
            </div>
        </el-dialog>
        <!-- 单个操作修改分类 -->
        <el-dialog title="修改分类" width="650px" :visible.sync="dialogTypeVisible">
            <el-radio-group v-model="upType">
                <el-radio :label="item.id" v-for="(item, index) in articleClassificationList.slice(1)" :key="index">{{item.name}}
                </el-radio>
            </el-radio-group>
            <div class="Popubtn">
                <el-button type="primary" @click="updateTypeDo()" plain>确定</el-button>
                <el-button plain @click="dialogTypeVisible=false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    import Wangeditor from "@/components/wangeditor/wangeditor";
    import TinymceEditor from '@/components/wangeditor/TinymceEditor'
    export default {
        props: ["articleTab", 'articleConfig'],
        computed: {
            ...mapState({
                // 分页插件参数统一配置
                paginationParams: state => state.commonModule.paginationParams,
                // 权限列表
                permissionArr: state => state.commonModule.permissionArr,
                // 用户详细信息
                userInfo: state => state.userModule.userInfo,
                // 分类列表
                articleClassificationList: state =>
                    state.articleModule.articleClassificationList,
                // 我的文章/草稿/收藏列表
                articleOrDraftList: state => state.articleModule.articleOrDraftList
            })
        },
        components: {
            Wangeditor,TinymceEditor
        },
        created() {
            if (this.articleConfig.homearticlemode == 2) {
                this.articTab('abstract')
            } else {
                this.articTab('list')
            }
        },
        watch: {
            paginationParams: {
                //深度监听，可监听到对象、数组的变化
                handler(val, oldVal) {
                    this.check = []
                    this.checkAll = []
                },
                deep: true //true 深度监听
            }
        },
        data() {
            return {
                content: "",
                upPermission: 5,
                upType: null,
                timeOutOne: "",
                formInline: {
                    user: "",
                    region: ""
                },
                isArticleEdit: false,
                isDraft: 1,
                isNoReprint: false,
                updateArticleId: null,
                isToping: false,
                articleClassification: "1024", // 分类
                permission: 5, // 权限
                checkList: ["复选框 A"],
                articleTitle: "", // 文章标题
                editorContent: "", // 写文章暂存
                isList: true,
                isAdministration: false,
                checkAll: false,
                isIndeterminate: false,
                check: [],
                radio: "",
                dialogTableVisible: false,
                dialogTypeVisible: false,
                articleTemporary: {} //文章暂存
            };
        },
        methods: {
            // 移除收藏文章
            collectRemove(params){
                var ids = ''
                var idsAr = []
                if (params) {
                    ids = params.id
                    idsAr.push(ids)
                } else {
                    if (this.check.length > 0) {
                        this.check.map(item => {
                            ids += ',' + item.id
                            idsAr.push(item.id)
                        })
                        ids.slice(1)
                    } else {
                        this.$message.warning('请先选择数据')
                        return
                    }
                }
                this.$store.dispatch('collectModule/collectDel', {
                    userid: this.userInfo.id,
                    ids: ids
                }).then(res =>{
                    if(res.data.code == 200){
                        this.articleOrDraftList.forEach((item,index,arr) => {
                            if(idsAr.indexOf(item.id) !=-1){
                                arr.splice(index,1)
                            }
                        })
                        this.$emit('collectPage')
                        this.check = []
                        this.$message.success('移除成功')
                    }
                })
            },
            // 收藏文章
            collect(params) {
                this.$store.dispatch('collectModule/collectAdd', {
                    collectid:params.id,
                    fromuserid: params.userid,
                    longtime: '45',
                    title: params.title,
                    touserid: this.userInfo.id,
                    type: 4 //收藏类型：1试卷、2视频、3试题、4文章,默认4
                }).then(res =>{
                    if(res.data.code == 200){
                        params.collect = true
                        this.articTab('list')
                        this.$message.success('收藏成功')
                        this.articTab('abstract')
                    }
                })
            },
            handleCheckChange(params) {
                if (this.check.length == this.articleOrDraftList.length) {
                    this.isIndeterminate = true
                } else {
                    this.isIndeterminate = false
                }
            },
            // 全选框选择时触发
            handleCheckAllChange(params) {
                if (params) {
                    this.isIndeterminate = true
                    this.check = this.articleOrDraftList
                } else {
                    this.check = []
                    this.isIndeterminate = false
                }
            },
            // 批量操作修改分类
            updateType(params) {
                if (this.params) {
                    this.upType = params.classify
                } else {
                    this.upType = null
                }
                this.articleTemporary = params
                this.dialogTypeVisible = true
            },
            // 批量操作修改分类
            updateTypeDo() {
                var ids = ''
                if (this.articleTemporary && this.articleTemporary.id) {
                    ids = this.articleTemporary.id

                } else {
                    if (this.check.length > 0) {
                        this.check.map(item => {
                            ids += ',' + item.id
                        })
                        ids.slice(1)
                    } else {
                        this.$message.warning('请先选择数据')
                        this.dialogTypeVisible = false
                        return
                    }
                }
                if (ids != '') {
                    this.$store
                        .dispatch("articleModule/classify", {
                            classify: this.upType,
                            ids: ids,
                            userid: this.userInfo.id
                        })
                        .then(res => {
                            if (res.data.code == 200) {
                                this.dialogTypeVisible = false
                                this.$emit('articleList')
                            } else {
                                this.$message.warning(res.data.msg)
                            }
                        });
                }
            },
            // 批量操作设置权限
            updatePermission(params) {
                this.upPermission = params.jurisdictionid
                this.dialogTableVisible = true
                this.articleTemporary = params
            },
            // 批量操作设置权限
            updatePermissionDo() {
                var ids = ''
                if (this.articleTemporary.id) {
                    ids = this.articleTemporary.id
                } else {
                    if (this.check.length > 0) {
                        this.check.map(item => {
                            ids += ',' + item.id
                        })
                    } else {
                        this.$message.warning('请先选择数据')
                        this.dialogTableVisible = false
                        return
                    }
                }
                if (ids) {
                    this.$store
                        .dispatch("articleModule/jurisdiction", {
                            jurisdictionid: this.upPermission,
                            ids: ids.slice(1),
                            userid: this.userInfo.id
                        })
                        .then(res => {
                            if (res.data.code == 200) {
                                this.$emit('articleList')
                                this.dialogTableVisible = false
                            } else {
                                this.$message.warning(res.data.msg)
                            }
                        });
                }
            },
            // 编辑文章或者草稿
            articleEdit(params, type) {
                if (type == 'drafts') {
                    this.isArticleEdit = false
                } else {
                    this.isArticleEdit = true
                }
                this.articleTitle = params.title
                this.articleClassification = params.classify ? params.classify : "1025"
                this.permission = params.jurisdictionid
                this.isNoReprint = params.reprint
                this.isToping = false
                this.content = params.content
                this.articTab("write")
            },
            // 删除文章或者草稿
            articleDelete(params, isDraft) {
                var ids = ''
                if (params) {
                    ids = params.id
                } else {
                    if (this.check.length > 0) {
                        this.check.map(item => {
                            ids += ',' + item.id
                        })
                    } else {
                        this.$message.warning('请先选择数据')
                        return
                    }
                }
                this.$store
                    .dispatch("articleModule/articlesDel", {
                        ids: ids,
                        userid: this.userInfo.id
                    })
                    .then(res => {
                        if (res.data.code == 200) {
                            this.$emit('articleList', isDraft)
                        }
                    });
            },
            // 新增文章
            addArticle(params) {
                this.isArticleEdit = false
                this.isDraft = params;
                if (this.articleTitle != "" && this.content !='') {
                    this.$store
                        .dispatch("articleModule/articleIssue", {
                            id: (this.isDraft == 0 || this.isArticleEdit) ? this.updateArticleId : null,
                            content: "" + this.content?this.content:edit + "",
                            classify: this.articleClassification,
                            draft: this.isDraft,
                            isDisabledForward: this.isNoReprint,
                            isTop: this.isToping,
                            title: this.articleTitle,
                            userid: this.userInfo.id,
                            jurisdictionid: this.permission
                        })
                        .then(res => {
                            if (res.data.code == 200) {
                                if (res.data.result) {
                                    this.updateArticleId = res.data.result;
                                    if (this.isDraft == 0) {
                                        this.$message.success("添加草稿成功");
                                    }
                                }
                                if (this.isDraft == 1) {
                                    this.articleTitle = "";
                                    this.content = ''
                                    this.$message.success("操作成功");
                                    this.$emit('articleList');
                                    this.articTab("list");
                                }
                            }
                        });
                } else {
                    this.$message.warning("请先输入新内容");
                }
                // this.$refs.editorElem.provideDatas();
            },
            // 切换tab时
            articTab(param) {
                if (param == "abstract") {
                    this.isList = false;
                    this.$emit("cShowPagin", true);
                }
                if (param == "list") {
                    this.isList = true;
                    this.$emit("cShowPagin", true);
                }
                if (param == "write") {
                    this.isList = null;
                    this.$emit("cShowPagin", false);
                }
            },
            // 调转文章详情
            goReading(param) {
                if(this.userInfo.id && param.id){
                    this.$store.dispatch('visitorAllModule/visitorAdd', {
                        fromuserid: param.userid,
                        visitorid: param.id,
                        type: 2
                    })
                }
                this.$store.commit('articleModule/INIT_ARTICLEORPOST', param)
                this.$router.push({
                    path: "readingArticle",
                    query: {
                        articleMes: param,
                        id:param.id,
                    }
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .articleListBox {
        .operationBox {
            box-sizing: border-box;
            padding: 8px 0;
            border-bottom: 1px solid #909399;

            .btns {
                float: left;
                margin-top: 12px;
                color: #909399;
                font-size: 14px;

                span {
                    cursor: pointer;
                    box-sizing: border-box;
                    padding: 5px 8px;
                }

                span.btnsActive {
                    background-color: #409eff;
                    color: white;
                }
            }

            .term {
                float: right;

                .batch {
                    margin-right: 20px;
                }
            }
        }

        .operation {
            box-sizing: border-box;
            padding: 8px 0;
            border-bottom: 1px solid #909399;
            text-align: left;
        }

        .listWrap {
            margin-top: 20px;
            list-style-type: none;
            margin-block-start: 0;
            margin-block-end: 0;
            padding-inline-start: 0;

            .list {
                box-sizing: border-box;
                padding-bottom: 5px;
                border-bottom: 1px dashed #909399;
                margin-top: 10px;
                cursor: pointer;

                .listTitleWarp {
                    .listTitle {
                        float: left;
                        font-size: 14px;
                        color: #303133;
                        margin-top: 12px;
                    }

                    .btn {
                        float: right;

                        .time {
                            font-size: 14px;
                            color: #303133;
                            margin-right: 12px;
                        }
                    }
                }

                .substance {
                    font-size: 14px;
                    color: #303133;

                    p {
                        margin-block-start: 0;
                        margin-block-end: 0;
                        text-align: left;

                        .time {
                            margin-right: 15px;
                        }
                    }

                    p:first-of-type {
                        text-indent: 24px;
                        text-align: justify;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                    }
                }
            }
        }
    }

    .clearFix::after {
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }

    .Popubtn {
        margin-top: 25px;
    }
</style>